<%--
  Created by IntelliJ IDEA.
  User: wyp
  Date: 2020/5/22
  Time: 15:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="./resources/lib/layui/css/main.css">
    <link rel="stylesheet" type="text/css" href="./resources/lib/layui/css/layui.css">
    <script type="text/javascript" src="./resources/lib/layui/layui.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./resources/css/bootstrap.css" />
    <link rel="stylesheet" href="./resources/css/style.css" type="text/css" media="all"/>
    <!--引入JQuery，必须要在bootstrap.js之前引入-->
    <script type="text/javascript" src="./resources/js/jquery-3.4.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="./resources/js/bootstrap.js"></script>
    <title>景点列表</title>
</head>
<body>
<!--头部文件-->
<%@include file="WEB-INF/view/index/top.jsp"%>

<!--搜索部分-->
<%@include file="WEB-INF/view/index/navigation.html"%>

<!--中间部分1：搜索栏-->
<style>
    div.searchDiv{
        margin: 0 auto;
        background-color: #CDB79E;
        width: 300px;
        display: block;
        border-radius: 20px;
    }
    div.searchDiv input{
        width: 225px;
        height: 46.4px;
        border: 1px solid transparent;
        margin: 2px;
        outline:none;
        border-radius: 20px;
    }
    div.searchDiv button{
        width: 60px;
        border: 1px solid transparent;
        background-color: #CDB79E;
        color: white;
        font-size: 15px;
        /* 	font-weight:bold */;
    }



    body{
        font-size: 15px;
        font-family: Arial;
    }

</style>
<script>
    $(document).ready(function () {
        console.log("页面载入时！");
        var page = 1;//默认当前页为1
        var searchName = getUrlParam("searchName");
        console.log(searchName);
        SpotPager(page,searchName);

    });
    //获取地址栏参数//可以是中文参数
    function getUrlParam(key) {
        // 获取参数
        var url = window.location.search;
        // 正则筛选地址栏
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        // 匹配目标参数
        var result = url.substr(1).match(reg);
        //返回参数值
        return result ? decodeURIComponent(result[2]) : null;
    }


    //景点分页
    function SpotPager(page,searchName) {
        $.ajax({
            type: "POST",
            dataType: "json",
            data:{"method":"allSpot","page":page,"pageSize":10,"searchName":searchName},
            url:"./spotController",
            success:function (data) {
                outSpot (data);
            }
        });
        return false;
    };

    //输出景点
    function outSpot(data){
        var result = "";
        for(var i = 0;i<data["data"].length;i++){
            result+="<div class=\"list-item\">\n" +
                "                    <a href=\"./spotDetail.jsp?spotId="+data["data"][i].spotId+"\"><img src=\"."+data["data"][i].spotImgUrl+"\" ></a>\n" +
                "                    <h3>"+data["data"][i].spotName+"</h3>\n" +
                "                </div>";
        }
        $("#list-item").html(result);

        /*分页*/
        //字符串存储html文本
        var pagerL ="";
        //当前页
        var nowPage = data["page"];
        for(var i = 1;i<=data["pages"];i++){
            if(i===nowPage){
                pagerL+="<span class=\"current\">"+i+"</span>"
            }else {
                pagerL+="<a class=\"num\" href=\"javascript:SpotPager("+i+")\">"+i+"</a>";
            }
        }
        $("#pagerList").html("<a class=\"prev\" href=\"javascript:SpotPager(1)\" >&lt;&lt;</a>"
            +pagerL+
            "<a id=\"lastPage\" class=\"next\" href=\"javascript:SpotPager("+data["pages"]+")\">&gt;&gt;</a>");

    };

    //查找景点按钮
    function searchSpotByName() {
        var searchName = $('#spotName').val();
        var pageSize = 10;
        console.log(searchName);
        $.ajax({
            type:"POST",
            data:{"method":"searchSpot","pageSize":pageSize,"searchName":searchName},
            url:"./spotController",
            dataType:"json",
            success:function (data) {
                outSpot (data);
            },
            error:function (data) {
                alert("找不到该景点");
            }
        });
        return false;
    }
</script>
<div style="background-color: #f8f8f8;">
    <div class="searchDiv">
            <input type="text" placeholder="请输入要查询的景点名称" id="spotName" name="spotName" style="padding-left: 5%;" >
            <button class="searchButton" type="button" onclick="searchSpotByName()">搜索</button>
    </div>
</div>
<!--中间部分-->
<%@include file="spotList.html"%>

<!--尾部文件-->
<%@include file="WEB-INF/view/index/footer.html"%>
</body>
</html>
